<template>
  <div class="wodeguanzhu" v-if="list.length>0">
    <div class="title">
      <h3>我关注的人</h3>
      <el-input size="mini" v-model="input" placeholder="请输入博主昵称"></el-input>
      <!-- <el-button type="primary" size="mini" @click="search(input)">搜索</el-button> -->
      <font class="renshu">共{{search(input).length}}人</font>
      <img class="qiehuan" @click="qiehuan()" v-if="div" src="@/assets/切换.png" />
      <img class="qiehuan" @click="qiehuan()" v-if="!div" src="@/assets/切换2.png" />
    </div>
    <div class="div1" v-if="div">
      <div class="nr">
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="tx">
            <el-avatar
            @click.native="blog(item.blogdata.users.users.mailbox)"
              :src="poot+'manongyizhanFile/users/'+item.blogdata.users.users.mailbox+'/头像/'+item.blogdata.users.users.mailbox+'.jpg'"
            ></el-avatar>
            <h3 class="h3" @click="blog(item.blogdata.users.users.mailbox)">{{item.blogdata.users.users.nickname}}</h3>
            <img
              class="imggz"
              @click="quxiaoguanzhu(item.blogdata.users.users.mailbox)"
              src="@/assets/关注.png"
              title="关注"
            />
          </div>
          <div class="blogdata">
            <div class="gr">
              <div class="gritem">
                <font class="num">{{item.blogdata.qriginal}}</font>
                <br />
                <font class="titledata">创作</font>
              </div>
              <div class="gritem">
                <font class="num">{{item.blogdata.fabulous}}</font>
                <br />
                <font class="titledata">获赞</font>
              </div>
              <div class="gritem">
                <font class="num">{{item.blogdata.collection}}</font>
                <br />
                <font class="titledata">收藏</font>
              </div>
              <div class="gritem">
                <font class="num">{{item.blogdata.comment}}</font>
                <br />
                <font class="titledata">评价</font>
              </div>
            </div>
            <div class="gr">
              <div class="gritem">
                <font class="num">{{item.blogdata.browse}}</font>
                <br />
                <font class="titledata">访问</font>
              </div>
              <div class="gritem">
                <font class="num">{{item.blogdata.fans}}</font>
                <br />
                <font class="titledata">粉丝</font>
              </div>

              <div class="gritem">
                <font class="num">{{item.blogdata.codeage}}</font>
                <br />
                <font class="titledata">码龄(年)</font>
              </div>
              <div class="gritem">
                <font class="num">{{item.blogdata.grade}}</font>
                <br />
                <font class="titledata">等级</font>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="div2" v-if="!div">
      <div class="nr2">
        <div class="item2" v-for="(item,index) in search(input)" :key="index" >
          <div class="tx2">
            <el-avatar
            @click.native="blog(item.blogdata.users.users.mailbox)"
              :src="poot+'manongyizhanFile/users/'+item.blogdata.users.users.mailbox+'/头像/'+item.blogdata.users.users.mailbox+'.jpg'"
            ></el-avatar>
            <h3 class="h32" @click="blog(item.blogdata.users.users.mailbox)">{{item.blogdata.users.users.nickname}}</h3>
            <div class="blogdata2">
              <div class="gr2">
                <div class="gritem2">
                  <font class="titledata">创作</font>
                  <font class="num">{{item.blogdata.qriginal}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">获赞</font>
                  <font class="num">{{item.blogdata.fabulous}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">收藏</font>
                  <font class="num">{{item.blogdata.collection}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">评价</font>
                  <font class="num">{{item.blogdata.comment}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">访问</font>
                  <font class="num">{{item.blogdata.browse}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">粉丝</font>
                  <font class="num">{{item.blogdata.fans}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">码龄(年)</font>
                  <font class="num">{{item.blogdata.codeage}}</font>
                </div>
                <div class="gritem2">
                  <font class="titledata">等级</font>
                  <font class="num">{{item.blogdata.grade}}</font>
                </div>
              </div>
            </div>
            <img
              class="imggz2"
              src="@/assets/关注.png"
              title="关注"
              @click="quxiaoguanzhu(item.blogdata.users.users.mailbox)"
            />
          </div>
          <div class="hr">
            <hr />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      list: "",
      div: false,
      input: ""
    };
  },
  methods: {
      blog(user){
       this.$http
        .get(this.poot + "selectblogBymailbox/" + user)
        .then(response => {
   this.$router.push("/blog/"+response.data[0].blog.id);

        })
        .catch(function(error) {
          console.log(error);
        });
      },
    search(n) {
      return this.list.filter(item => {
        if (item.blogdata.users.users.nickname.includes(n)) {
          return item;
        }
      });
    },
    qiehuan() {
      this.div = !this.div;
    },
    quxiaoguanzhu(u) {
      this.$http
        .get(this.poot + "deleteattention/" + u + "/" + this.user)
        .then(response => {
          this.open("取消成功", "success");
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectAll/" + this.user)
        .then(response => {
          this.list = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    open(message, type) {
      this.$message({
        message: message,
        type: type
      });
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
  }
};
</script>
<style scoped>
.nr2 {
  margin-top: 20px;
  background-color: #1e1e1e;
  width: 100%;
  height: 650px;
  overflow: auto;
  
}
.nr2::-webkit-scrollbar {
  display: none;
}
hr{
    background-color: #999999;
    border:none;
    height: 1px;
}
.hr {
  margin-left: 90px;
  margin-right: 10px;
}
.gritem2 {
  width: 25%;
}
.blogdata2 {
  width: 70%;
}
.gr2 {
  display: flex;
  align-items: center;
}
.imggz2 {
  height: 20px;
}
.tx2 {
  display: flex;
  align-items: center;
}
.h32 {
  font-size: 15px;
  margin-left: 30px;
  color: #354b7b;
  width: 150px;
}
.qiehuan {
  height: 20px;
  margin-left: 30px;
}
.el-button {
  margin-left: 20px;
  background-color: #161616;
  border: #ffd04b 1px solid;
  color: #fff;
}
.el-input {
  width: 650px;
  margin-left: 30px;
}
.titledata {
  font-weight: bold;
  color: #354b7b;
}
.gritem {
  text-align: center;
  width: 25%;
}
.gr {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.imggz {
  height: 20px;
}
.h3 {
  font-size: 15px;
  margin-left: 10px;
  color: #354b7b;
  width: 100px;
}
.tx {
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  margin-top: 10px;
}
.el-avatar {
  margin: 10px;
}
.item {
  margin: 20px;
  height: 220px;
  width: 200px;
  background-color: #161616;
  /* display: flex; */
}
.wodeguanzhu {
  width: 100%;
}
.title {
  margin-top: 20px;
  background-color: #1e1e1e;
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
.nr {
  margin-top: 20px;
  background-color: #1e1e1e;
  width: 100%;
  height: 650px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.nr::-webkit-scrollbar {
  display: none;
}
h3 {
  font-size: 20px;
  margin-left: 20px;
  color: #354b7b;
}
.renshu {
  margin-left: 50px;
}
</style>